<template>
	<view class="container">
		<navbar title="我的团队"></navbar>
		<view class="wrap">
			<view class="team-wrap">
				<image src='../img/bg.png'></image>
				<view class="team-con">
					<view class="title">我的团队</view>
					<view class="inite-wrap" @tap='watchCode'>
						<view class="inite-w line_center">邀请码</view>
						<view class="invite-code">
							<image src='../img/code.png'></image>
						</view>
					</view>
					<view class="man-num-wrap">
						<view class="man-num-item">
							<view class="man-num-t">我的上级</view>
							<view class="man-num-t">王鹏宇</view>
						</view>
						<view class="man-num-item">
							<view class="man-num-t">下级总数</view>
							<view class="man-num-t">100人</view>
						</view>
					</view>
				</view>
			</view>
			<view class="base-title">
				<view class="line"></view>
				<view>下级列表</view>
			</view>
			<view class="people-wrap">
				<view class="people-item" v-for='(item,index) in 10'>
					<view class="head-icon">
						<base-img></base-img>
					</view>
					<view class="right">
						<view class="name">横幅个很烦的</view>
						<view class="call">手机号：15390157123</view>
						<view class="call">2023-05-23 06:21:54</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseImg from '@/components/base-img/base-img.vue'
	export default {
		components:{
			baseImg,
		},
		data() {
			return {

			};
		},
		methods:{
			watchCode(){
				uni.navigateTo({
					url:'/pages/user/invite-code/invite-code'
				})
			}
		}
	}
</script>
<style>
	page {
		min-height:100%;
	}
</style>
<style lang="scss" scoped>
	.container{
		height: 100%;
		background: $dis-con-color;
	}
	.wrap{
		margin:0 20rpx;
		padding-top:30rpx;
		padding-bottom: 100rpx;
	}
	image{
		width: 100%;
		height:100%;
	}
	.team-wrap{
		width:100%;
		height:300rpx;
		background: #FF5A65;
		position: relative;
		border-radius: 22rpx;
		.team-con{
			width:100%;
			height: 100%;
			padding:0 32rpx;
			box-sizing: border-box;
			position: absolute;
			left:0;
			top:0;
			color:#fff;
			.title{
				font-size: 36rpx;
				font-weight: bold;
				line-height: 48rpx;
				padding-top:56rpx;
			}
			.inite-wrap{
				width:100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin:-30rpx 0 0 524rpx;
				.inite-w{
					width:76rpx;
					padding:0 14rpx;
					height: 36rpx;
					background: #FED9A4;
					font-size: 20rpx;
					color:#A56E33;
					border-radius: 20rpx;
					position: relative;
					&:after{
						content: '';
						width: 0;
						height: 0;
						border-left: 4px solid transparent;
						border-right: 4px solid transparent;
						border-top: 5px solid #FED9A4;
						position: absolute;
						left:0;
						right:0;
						margin:auto;
						bottom:-9rpx
					}
				}
				.invite-code{
					width: 40rpx;
					height: 40rpx;
					margin-top:12rpx;
				}
			}
		}
	}
	.man-num-wrap{
		width: 646rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:20rpx;
		.man-num-item{
			flex:1;
			text-align: center;
			font-size: 24rpx;
			position: relative;
			&:first-of-type{
				&:after{
					content: '';
					width: 2rpx;
					height: 60rpx;
					background: #fff;
					position: absolute;
					right:0;
					top:0;
				}
			}
		}
	}
	.base-title{
		display: flex;
		align-items: center;
		margin-top:40rpx;
		.line{
			width: 6rpx;
			height: 28rpx;
			opacity: 1;
			background: #FF5A65;
			margin-right: 16rpx;
		}
	}
	.people-wrap{
		.people-item{
			padding:38rpx 30rpx;
			border-bottom: 1rpx solid #F7F7F7;
			display: flex;
			.head-icon{
				width: 108rpx;
				height: 108rpx;
				border-radius: 100%;
				overflow: hidden;
				margin-right: 32rpx;
			}
			.right{
				flex:1;
				overflow: hidden;
			}
			.name{
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.call{
				font-size: 24rpx;
				color: #D1D1D1;
				line-height: 34rpx;
			}
		}
	}
	
</style>